<template>
    <el-popover ref="popoverRef" virtual-triggering :virtual-ref="triggerRef" :append-to="triggerRef" :visible="visible"
        popper-class="infTable-dropdown-popover" :offset="5" :show-after="100" :hide-after="100" :popper-options="{
            modifiers: [
                {
                    name: 'computeStyles',
                    options: {
                        adaptive: false,
                        enabled: false,
                    },
                },
            ],
        }">
        <ul v-if="rowData.infType == 'C'" class="dropdown-list">
            <li v-hasPermi="['testmanage:infManage:add']" v-throttle @click="emitFun('handleAddInf')">
                <el-icon style="font-size: 15px; vertical-align: middle;">
                    <SetUp />
                </el-icon>
                新增接口
            </li>
            <li v-hasPermi="['testmanage:infManage:add']" v-throttle @click="emitFun('handleAddCata')">
                <el-icon style="font-size: 15px; vertical-align: middle;">
                    <FolderAdd />
                </el-icon>
                新增子目录
            </li>
        </ul>
        <ul v-if="rowData.infType == 'I'" class="dropdown-list">
            <li v-hasPermi="['testmanage:infManage:copy']" v-throttle @click="emitFun('handleCopy')">
                <el-icon style="font-size: 15px; vertical-align: middle;">
                    <DocumentCopy />
                </el-icon>
                复制
            </li>
            <li v-hasPermi="['testmanage:infManage:remove']" v-throttle @click="emitFun('handleDeleteInfById')">
                <el-icon style="font-size: 15px; vertical-align: middle;">
                    <DocumentRemove />
                </el-icon>
                删除
            </li>
        </ul>
    </el-popover>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const props=defineProps({
    addInfItem:{

    }
})
const rowData = ref({})
const emit = defineEmits([''])
const emitFun = (name) => {
    closeDropdown();
    console.log(rowData.value)
    emit('clickItme', name, rowData.value)
}
const visible = ref(false);
const triggerRef = ref()
const openDropdown = (element, data) => {
    rowData.value = data;
    triggerRef.value = element.currentTarget
    visible.value = true;
}
const closeDropdown = () => {
    visible.value = false;
}
defineExpose({
    openDropdown, closeDropdown
})
</script>
<style lang="scss" scoped>
.dropdown-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 12px;

    li {
        margin: 0;
        padding: 5px 10px;
        cursor: pointer;
        display: flex;
        align-items: center;

        &:hover {
            background: #eee;
        }

        .el-icon {
            margin-right: 3px;
            width: 1em;
            height: 1em;
        }
    }
}
</style>
<style lange="scss">
.infTable-dropdown-popover.el-popover.el-popper {
    padding: 5px 0;
    min-width: unset;
    width: auto !important;
}
</style>